<script setup>
import { ref } from 'vue'
import RangePicker from '../components/RangePicker/RangePicker.vue'

// 基础范围选择
const basicRange = ref([0, 100])

// 自定义格式范围
const priceRange = ref([0, 1000])
const formatPrice = (value) => `¥${value}`

// 温度范围
const temperatureRange = ref([-20, 50])
const formatTemp = (value) => `${value}°C`
</script>

<template>
  <div class="range-picker-demo">
    <!-- 基础示例 -->
    <section class="demo-block">
      <h3>基础范围选择</h3>
      <RangePicker
          v-model="basicRange"
          :min="0"
          :max="100"
          :step="1"
          placeholder-start="最小值"
          placeholder-end="最大值"
      />
      <div class="demo-value">当前值: {{ basicRange[0] }} - {{ basicRange[1] }}</div>
    </section>

    <!-- 价格范围示例 -->
    <section class="demo-block">
      <h3>价格范围选择</h3>
      <RangePicker
          v-model="priceRange"
          :min="0"
          :max="1000"
          :step="10"
          :format="formatPrice"
          placeholder-start="最低价"
          placeholder-end="最高价"
      />
      <div class="demo-value">价格区间: {{ formatPrice(priceRange[0]) }} - {{ formatPrice(priceRange[1]) }}</div>
    </section>

    <!-- 温度范围示例 -->
    <section class="demo-block">
      <h3>温度范围选择</h3>
      <RangePicker
          v-model="temperatureRange"
          :min="-20"
          :max="50"
          :step="1"
          :format="formatTemp"
          :disabled="true"
          placeholder-start="最低温"
          placeholder-end="最高温"
      />
      <div class="demo-value">温度区间: {{ formatTemp(temperatureRange[0]) }} - {{ formatTemp(temperatureRange[1]) }}</div>
    </section>
  </div>
</template>

<style scoped>
.range-picker-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-block {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.demo-value {
  margin-top: 10px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  border: 1px solid #e4e7ed;
}
</style>